<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>枣庄农商银行网上营业厅</title>

<link rel="stylesheet" type="text/css"
	href="js/bootstrap-3.3.0-dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="css/layout.css" />
<link type="text/css" rel="stylesheet" href="css/validation.css" />

<script type="text/javascript"
	src="js/bootstrap-3.3.0-dist/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript"
	src="js/bootstrap-3.3.0-dist/js/jquery.validate.min.js"></script>
<script type="text/javascript"
	src="js/bootstrap-3.3.0-dist/js/additional-methods.js"></script>
<script type="text/javascript"
	src="js/bootstrap-3.3.0-dist/js/idcard_validate.js"></script>
<script type="text/javascript"
	src="js/bootstrap-3.3.0-dist/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="js/bootstrap-3.3.0-dist/js/time.js"></script>
<script type="text/javascript"
	src="js/bootstrap-3.3.0-dist/js/bootstrapValidator.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#customApplyForm').validate({
			// 			debug : true,
			errorPlacement : function(error, element) {
				error.appendTo(element.parent().next());
				//    if ( element.is(":radio") )
				//        error.appendTo( element.siblings("span") );
				//    else if ( element.is(":checkbox") ){
				//        error.appendTo ( element.siblings("span") );
				//    }
				//        else
				//        error.appendTo( element.parent() );
			},
			//失去焦点时验证
			onfocusout : function(element) {
				$(element).valid();
			},
			onkeyup : function(element) {
				$(element).valid();
			},
			focusInvalid : false,
			rules : {
				customName : {
					required : true,
					maxlength : 6,
					chineseCheck : true
				},
				telphone : {
					required : true,
					digits : true,
					isMobile : true
				},
				msgCode : {
					required : true,
					digits : true,
					msgCode : true
// 					remote : {
// 						url : "loan/checkConfirmCode", //后台处理程序
// 						type : "post", //数据发送方式
// 						dataType : "json", //接受数据格式   
// 						cache : false,
// 						data : { //要传递的数据
// 							msgCode : function() {
// 								return $("#msgCode").val();
// 							},
// 							telphone : function() {
// 								return $("#telphone").val();
// 							}
// 						}
// 					}
				},
				customId : {
					required : true,
					isIdCard : true
				},
				applyNum : {
					required : true,
					number : true,
					range : [ 1, 50 ]
				},
				memberName : {
					maxlength : 6,
					chineseCheck : true
				},
				memberId : {
					isIdCard : true
				}
			},
			messages : {
				customName : {
					required : "没有填写客户姓名",
					maxlength : "客户姓名长度不能超过6位",
					chineseCheck : "客户姓名只能为汉字"
				},
				telphone : {
					required : "没有填写手机号码",
					digits : "只能输入数字",
					isMobile : "请正确填写您的手机号码"
				},
				msgCode : {
					required : "没有填写验证码",
					digits : "只能输入数字",
					msgCode : "请正确填写验证码"
				},
				customId : {
					required : "没有填写身份证号",
					isIdCard : "请填写正确的身份证号"
				},
				applyNum : {
					required : "没有填写申请金额",
					number : "只能输入数字",
					range : "申请金额为人民币{0}万~{1}万",
				},
				memberName : {
					maxlength : "客户姓名长度不能超过6位",
					chineseCheck : "客户姓名只能为汉字"
				},
				memberId : {
					isIdCard : "请填写正确的身份证号"
				}
			},
		});
		$("#msgCode").focus(function() {
			if (!($("#telphone").valid())) {
				$("#msgCode").attr("disabled", "true");
			}
		});
		$("#msgCode").blur(function() {
			if ($("#msgCode").valid()) {
				if(InterValObj) {
					window.clearInterval(InterValObj);//停止计时器
				}
				$("#btnSendCode").removeAttr("disabled");//启用按钮
				$("#btnSendCode").val("重新获取验证码");
			}
		});
		$("#telphone").blur(function() {
			if ($("#telphone").valid()) {
				$("#msgCode").removeAttr("disabled");
			}
			if($("#msgCode").val() != '') {
				if($("#msgCode").val() != '') {
					if($.data(document.getElementById("msgCode"), "previousValue"))
					{
						$.data(document.getElementById("msgCode"), "previousValue").old = null; 
					}
					$("#msgCode").valid();
				}
			}
		});
		$('#bankId').change(function() {
// 			alert($(this).children('option:selected').val());
			$('#bankName').val($(this).children('option:selected').text());
		});

		$("#btnSubmit").click(function() {
			if($("#msgCode").val() != '') {
				if($("#msgCode").val() != '') {
					if($.data(document.getElementById("msgCode"), "previousValue"))
					{
						$.data(document.getElementById("msgCode"), "previousValue").old = null; 
					}
					$("#msgCode").valid();
				}
			}
			if($("#msgCode").valid()) {
				if($('#customApplyForm').valid()){
					$("#btnSubmit").attr("disabled", "true");
					$.ajax({
						url : "loan/saveCustomApplyInfo",
						data : {
							"bankId" : $("#bankId").val(),
							"bankName" : $("#bankName").val(),
							"applyPeriod" : $("#applyPeriod").val(),
							"applyUse" : $("#applyUse").val(),
							"customMarry" : $("#customMarry").val(),
							"customName" : $("#customName").val(),
							"customId" : $("#customId").val(),
							"telphone" : $("#telphone").val(),
							"msgCode" : $("#msgCode").val(),
							"applyNum" : $("#applyNum").val(),
							"customAddress" : $("#customAddress").val(),
							"office" : $("#office").val(),
							"memberId" : $("#memberId").val(),
							"memberName" : $("#memberName").val()
						},
						type : "POST",
						success : function(map) {
							if (map.success) {
								window.location.href = 'loancomplete';
							} else {
								$("#btnSubmit").removeAttr("disabled");
								$("#errorMsg").css('display', 'inline');
							}
						}
					});
				}
			}
		});
	});
</script>
<script type="text/javascript">
	function initSelectData() {
		getBranchSelectList();
	}
	function getBranchSelectList() {
		$.ajax({
			url : "branch/getBranchSelectList",
			type : "POST",
			success : function(result) {
				var array = new Array();
				array = result.split(";");
				for (i = 0; i < array.length - 1; i++) {
					var options = array[i].split("&");
					$('#branchSelectList').append(
							"<option value=" + options[0] + ">" + options[1]
									+ "</option>");
				}
				getChildrenBranchList();
			}
		});
	}

	function getChildrenBranchList() {
		var branchId = $('#branchSelectList').val();
		$.ajax({
			url : "branch/getChildrenBranchSelectList?parentId=" + branchId,
			type : "POST",
			success : function(result) {
				$('#bankId').empty();
				var array = new Array();
				array = result.split(";");
				for (i = 0; i < array.length - 1; i++) {
					var options = array[i].split("&");
					$('#bankId').append(
							"<option value=" + options[0] + ">" + options[1]
									+ "</option>");
					if (i == 0) {
						$('#bankName').val(options[1]);
					}
				}
			}
		});
	}

	var InterValObj; //timer变量，控制时间
	var count = 60; //间隔函数，1秒执行
	var curCount;//当前剩余秒数

	function sendMessage() {
		if ($("#telphone").valid()) {
			//向后台发送处理数据
			var telphone = $('#telphone').val();
			$("#btnSendCode").attr("disabled", "true");
			$.ajax({
				url : "loan/getMsgCode?telphone=" + telphone,
				type : "POST",
				success : function(map) {
					if (map.success) {
						curCount = count;
						$("#btnSendCode").attr("disabled", "true");
						$("#btnSendCode").val(
								map.message + ",请在" + curCount + "秒内输入验证码");
						InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
					} else {
						$("#btnSendCode").removeAttr("disabled");
						$("#btnSendCode").val(map.message + ",重新获取验证码");
					}
				},
			});
		}
	}

	//timer处理函数
	function SetRemainTime() {
		if (curCount == 0) {
			window.clearInterval(InterValObj);//停止计时器
			$("#btnSendCode").removeAttr("disabled");//启用按钮
			$("#btnSendCode").val("重新获取验证码");
		} else {
			curCount--;
			$("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
		}
	}
</script>

</head>
<body onload="initSelectData()">

	<div id="header">
		<div id="header_con">
			<div class="header_l">
				<img src="images/logo.jpg" />
			</div>
			<div class="header_r">
				<span id="info1">2015年3月6日 星期五</span>
				<script>
					timeFormat()
				</script>
				<a href="/">返回首页</a>
			</div>
		</div>
	</div>

	<div id="content">
	<div id="content_bottom">
		<div id="content_con" style="height : 950px">
			<div>
			<div id="con_left">
				<div class="loan_title">
					<span>贷款业务</span>
				</div>
				
				<div class="loan_item">
					<ul class="left_list">
						<li>
							<a class="zl_title" href="../index.php?m=content&c=index&f=lists&catid=44&l=1&page=1">泰山福农卡</a>
						</li>
						<li>
							<a class="zl_title" href="../index.php?m=content&c=index&f=lists&catid=45&l=1&page=1">小微贷业务</a>
						</li>
						<li>
							<a class="zl_title" href="../index.php?m=content&c=index&f=lists&catid=46&l=1&page=1">农户贷款</a>
						</li>
						<li>
							<a class="zl_title1" href="officialloanclause">公务员贷款</a>
						</li>
					</ul>
				</div>
				<div class="loan_title">
					<span>POS机业务申请</span>
				</div>
				<div class="loan_item">
					<ul class="left_list">
						<li>
							<a class="zl_title" href="../index.php?m=content&c=index&f=lists&catid=40&l=1&page=1">POS机申请</a>
						</li>
					</ul>
				</div>
				<div class="loan_title">
					<span>其他业务</span>
				</div>
				<div class="loan_item">
					<ul class="left_list">
						<li>
							<a class="zl_title" href="../index.php?m=content&c=index&f=lists&catid=48&l=1&page=1">集团客户业务</a>
						</li>
						<li>
							<a class="zl_title" href="../index.php?m=content&c=index&f=lists&catid=49&l=1&page=1">社区客户业务</a>
						</li>
					</ul>
				</div>
				<div class="loan_title">
					<span>进度查询</span>
				</div>
				<div class="loan_item">
					<ul class="left_list">
						<li>
							<a class="zl_title" href="schedulesearch">进度查询</a>
						</li>
					</ul>
				</div>
				<div class="kefu1">
					<img src="images/kefu_tel.jpg">
				</div>
			</div>
			<div class="z_r_t">
				<span class="location">当前位置：<a href="/">首页</a>&nbsp;&gt; 
				<a href="../index.php?m=content&c=index&f=lists&catid=1&l=1&page=1">综合服务</a> &gt; 
				<a href="officialloanclause">公务员贷款</a></span>
			</div>
			<div id="con_right" style="height: 860px;">
				<div class="z_con_t">
					<span>公务员贷款</span>
				</div>
				<div class="content_title">
					<h4>
						填写申请表(带<font color="red">*</font>标注信息为必须填写信息)
					</h4>
				</div>
				<div class="loan_form difposhelpblock">
					<form id="customApplyForm" name="customApplyForm" method="post"
						action="loan/saveCustomApplyInfo" class="form-horizontal">
						<input type="hidden" id="bankName" name="bankName" />
						<div class="form-group">
							<label class="col-md-3 control-label"> <font size="3"
								color="red">*</font>&nbsp;客户姓名
							</label>
							<div class="col-md-4">
								<input type="text" class="form-control" id="customName"
									name="customName" />
							</div>
							<label class="control-label"></label>
						</div>
						<div class="form-group">
							<label class="col-md-3 control-label"> <font size="3"
								color="red">*</font>&nbsp;身份证号
							</label>
							<div class="col-md-4">
								<input type="text" class="form-control" id="customId"
									name="customId" />
							</div>
							<label class="control-label"></label>
						</div>

						<div class="form-group" id="telphoneDiv">
							<label class="col-md-3 control-label"> <font size="3"
								color="red">*</font>&nbsp;手机号码
							</label>
							<div class="col-md-3">
								<input type="text" class="form-control" id="telphone"
									name="telphone" />
							</div>
							<label class="control-label"></label>
						</div>
						<div class="form-group">
							<label class="col-md-3 control-label"> <font size="3"
								color="red">*</font>&nbsp;短信验证码
							</label>
							<div class="col-md-2">
								<input type="text" class="form-control" id="msgCode"
									name="msgCode" />
							</div>
							<label class="control-label"></label> <input id="btnSendCode"
								name="btnSendCode" type="button" class="btn btn-danger"
								onclick="sendMessage()" value="获取验证码" />
						</div>

						<div class="form-group">
							<label class="col-md-3 control-label"> <font size="3"
								color="red">*</font>&nbsp;选择贷款支行
							</label>
							<div class="col-md-4">
								<select id="branchSelectList" name="branchSelectList"
									class="form-control" onchange="getChildrenBranchList()">
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-md-3 control-label"> <font size="3"
								color="red">*</font>&nbsp;选择贷款网点
							</label>
							<div class="col-md-4">
								<select id="bankId" name="bankId" class="form-control">
								</select>
							</div>
						</div>

						<div class="form-group">
							<label class="col-md-3 control-label"><font size="3"
								color="red">*</font>&nbsp;申请金额</label>
							<div class="col-md-8 form-inline">
								<div class="input-group col-md-4">
									<span class="input-group-addon">￥</span> <input type="text"
										id="applyNum" name="applyNum" class="form-control"> <span
										class="input-group-addon">万元</span>
								</div>
								<label class="control-label"></label>
							</div>
						</div>

						<div class="form-group">
							<label class="col-md-3 control-label">申请贷款期限</label>
							<div class="col-md-4">
								<select class="form-control" id="applyPeriod" name="applyPeriod">
									<option value="6">6个月</option>
									<option value="12">12个月</option>
									<option value="24">24个月</option>
								</select>
							</div>
						</div>

						<div class="form-group">
							<label class="col-md-3 control-label">家庭住址</label>
							<div class="col-md-6">
								<input type="text" class="form-control" id="customAddress"
									name="customAddress" />
							</div>
						</div>

						<div class="form-group">
							<label class="col-md-3 control-label">工作单位</label>
							<div class="col-md-6">
								<input type="text" class="form-control" id="office"
									name="office" />
							</div>
						</div>

						<div class="form-group">
							<label class="col-md-3 control-label">贷款用途</label>
							<div class="col-md-4">
								<select class="form-control" id="applyUse" name="applyUse">
									<option value="购房">购房</option>
									<option value="购车">购车</option>
									<option value="其他">其他</option>
								</select>
							</div>
						</div>

						<div class="form-group">
							<label class="col-md-3 control-label">婚姻状况</label>
							<div class="col-md-4">
								<select class="form-control" id="customMarry" name="customMarry">
									<option value="未婚">未婚</option>
									<option value="已婚">已婚</option>
								</select>
							</div>
						</div>

						<div class="form-group">
							<label class="col-md-3 control-label">家庭成员姓名</label>
							<div class="col-md-4">
								<input type="text" class="form-control" id="memberName"
									name="memberName" />
							</div>
							<h6>(已婚填写配偶信息，未婚填写其他人)</h6>
							<label class="control-label"></label>
						</div>

						<div class="form-group">
							<label class="col-md-3 control-label">家庭成员身份证号</label>
							<div class="col-md-4">
								<input type="text" class="form-control" id="memberId"
									name="memberId" />
							</div>
							<label class="control-label"></label>
						</div>

						<div id="errorMsg" class="form-group form-group-bottom"
							style="display: none">
							<div class="col-md-5 col-md-offset-3">
								<div class="alert alert-danger alert-dismissable" style="margin-bottom: 0px;">
									<button type="button" class="close" data-dismiss="alert"
										aria-hidden="true">&times;</button>
									提交失败!
								</div>
							</div>
						</div>

						<div class="form-group form-group-bottom">
							<div class="col-md-5 col-md-offset-4">
								<button name="btnSubmit" id="btnSubmit" type="button"
									class="btn btn-danger btn-lg">提交申请</button>
							</div>
						</div>
					</form>
				</div>
			</div>
			</div>
		</div>
		<div id="footer">
		枣庄农商银行 2015 版权所有 桂ICP备03023960号<br>
				Copyright 2012 XuDong network technology Co., LT
			</div>
		</div>
		<!-- end of content_con-->
	</div>
</body>
</html>